<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>在线预订 - {$company_profile.name}</title>
<meta name="renderer" content="webkit">
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="no-cache, no-store, must-revalidate" http-equiv="Cache-Control" />
<meta content="no-cache" http-equiv="Pragma" />
<meta content="0" http-equiv="Expires" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/static/css/zui.min.css" rel="stylesheet">
<link href="{$_lang.company_path}/template/css/animate.css" rel="stylesheet">
<link href="{$_lang.company_path}/template/css/home.css" rel="stylesheet">
<script type="text/javascript" src="{$_lang.company_path}/template/js/jquery.js"></script>
</head>
<body>
<div id="fg">

	<!--提示框 方式1 begin-->
	<div class="prompt_mode1 hidden" >
		<p>你已经没有多余的商品了</p>
		<span onClick="javascript:util_close_dialog2();">确定</span>
	</div>
	<div class="mode1_fg hidden" ></div>
	<!--提示框 方式1 end-->

	<!--提示框 方式2 begin-->
	<div class="prompt_mode2 hidden" >
		<p>您设置人数超出限制</p>
	</div>
	
	<!--填写人数 begin-->
	<div class="step step_num">
		<div class="add_people_num">
			<div class="img"><img src="/company/template/images/people_num.png"/> </div>
			<div class="num"><span id="num">0</span>人</div>
			<div class="table">
				<table cellspacing="5" cellpadding="0">
					<tbody>
					<tr>
						<td class="change_num num_add">1</td>
						<td class="change_num num_add">2</td>
						<td class="change_num num_add">3</td>
					</tr>
					<tr>
						<td class="change_num num_add">4</td>
						<td class="change_num num_add">5</td>
						<td class="change_num num_add">6</td>
					</tr>
					<tr>
						<td class="change_num num_add">7</td>
						<td class="change_num num_add">8</td>
						<td class="change_num num_add">9</td>
					</tr>
					<tr>
						<td colspan="2" class="change_num num_add">0</td>
						<td class="change_num num_add"><img src="/company/template/images/delete.png" width="40"/></td>
					</tr>
					</tbody>
				</table>
			</div>
			<div class="btns">
				<input type="button" name="Calculator" class="btn_confirm_num  " value="确定"/>
			</div>
            {if $company_profile.consume_tip neq ""}
				<div>{$company_profile.consume_tip}</div>
            {/if}
		</div>
	</div>
	<!--填写人数 end-->

	<!-- step2 填写手机号码 begin-->
	<div class="step step_phone hidden" >
		<div class="reserve_header">
			<a href="{$_lang.host}company/?cid={$company_profile.c_id}">返回商家</a>
			填写电话号码
		</div>
		<div class="sum_people_con">
			<div class="sum_people_text">
				<span><i class="icon icon-mobile"></i></span>
				<div class="text">
					<input type="text" name="phone" placeholder="请输入正确的手机号码"/>
				</div>
			</div>
			<div class="sum_people_btn">
				<input type="button" name="btn_confirm_phone" value="确定"/>
			</div>
            {if $company_profile.consume_tip neq ""}
				<div style="width: 100%; height: 38px;line-height: 38px;margin-top: 10px;">{$company_profile.consume_tip}</div>
            {/if}
		</div>
	</div>
	<!--填写手机号码 end-->

	<!-- step3 商品列表 begin-->
	<div class="step step_products step_switch_0 hidden" >
		<div class="reserve_header">
			<a href="{$_lang.host}company/?cid={$company_profile.c_id}">返回商家</a>
			预订
		</div>
		<div class="tab_nav">
			<ul>
				<li class="active">消费</li>
				<li>会员中心</li>
			</ul>
		</div>
		<div class="menu_list">
			<div class="menu_left">
				<div class="left_con">
					<ul>
					{foreach $cat as $k=>$v}
						<li class="{if $k==0}active{/if} left_con_{$v['id']}">
							<span class="hidden">0</span>
							{$v['name']}
						</li>
					{/foreach}
					</ul>
				</div>
			</div>
			<div class="menu_right">
				<div class="list_memu_title">{$cat[0]['name']}</div>
				<div onscroll="menu_right_sr()" class="list_con">
				{foreach $cat as $k=>$v}
					<ul class="list_con_{$v['id']}" cat_id="{$v['id']}">
						<p>{$v['name']}</p>
						{foreach $v['products'] as $ke=>$va}
						<li class="product_{$va['id']} " pid="{$va['id']}">
							<img src="{if empty($va['img_path'])}{$_lang.company_path}/template/images/default.png{else}{$va.img_path}{/if}"/>
							<p>{$va['name']}</p>
							<span>￥<span class="price_{$va['id']}">{$va['price']}</span>{$va.unit}</span>
							<div class="add_sum">
								<span onClick="addCart('{$va['id']}','reduce','{$v['id']}')" class="reduce hidden"></span>
								<span class="cat_id_{$va['id']} {$va['id']} sum sum_{$va['id']} hidden">0</span>
								<span onClick="addCart('{$va['id']}','add','{$v['id']}')" class="add"></span>
							</div>
						</li>
						{/foreach}
					</ul>
				{/foreach}   
				</div>
			</div>
		</div>
		<div class="foot_con">
			<div class="foot_left od">
				<span class="cart_icon">
					<i class="icon icon-shopping-cart"></i>
					<span>0</span>
				</span>
				<div class="cart_price">
					<p class="new new_price">￥<span>0</span></p>
					<p class="old">原价<span>0</span>元</p>
				</div>
			</div>
			<div class="foot_btn btn_confirm_cart  hidden">
				<input type="button" value="点好了"/>
			</div>
		</div>
		<!--查看图片 begin-->
		<div class="pic_fg" style="display: none"></div>
		<div class="pic_view" style="display: none">
			<span class="closed">&nbsp;</span>
			<span class="collection" style="display:none"><i class="icon icon-heart"></i></span>
			<img src="{$_lang.company_path}/template/images/default.png"/>
			<div class="picwin_content">
				<p class="big"></p>
				<p class="small">￥<span class="price"></span></p>
				<div class="add_sum pic_v">
					<span onClick="addCart('2','reduce','1')" class="reduce "></span>
					<span class=" sum ">0</span>
					<span onClick="addCart('2','add','1')" class="add"></span>
				</div>
			</div>
			<div class="note">
				<ul>
					<li class="con">这是备注内容</li>
					<li class="updated"><span>修改</span></li>
				</ul>
				<span style="display: none">添加备注</span>
			</div>
		</div>

		<!--添加、修改备注的弹出框 -->
		<div class="note_fg" style="display: none"></div>
		<div class="add_note" style="display: none">
			<div class="note_nav">
				<span><i class="icon icon-angle-left"></i></span>
			</div>
			<div class="note_text_wrap">
				<input type="text" name="remark" placeholder="请填写备注" value=""/>
				<i></i>
				<span>保存</span>
			</div>
			<div class="note_content" style="display:none">
				<span>不加辣椒</span>
				<span>不加酱油</span>
				<span>少醋</span>
				<span>不加葱</span>
				<span>不加蒜</span>
				<span>微辣</span>
			</div>
		</div>
		<!--查看图片 end-->
		<!--点击底部出现的列表 begin-->
		<div class="xc_fg" style="display: none"></div>
		<div class="xc_con" style="display: none">
			<ul>
			</ul>
		</div>
		<!--点击底部出现的列表 end-->
	</div>
	<!--选菜 end-->
 
	<!-- step4 确认购物车 begin-->
	<div class="step step_cart hidden" >
		<div class="reserve_header">
			<a href="javascript:;"><i class="icon icon-angle-left icon-angle-left_order"></i></a>
			确认订单
		</div>
		<div class="ordering_con">
			<div class="fp">
				<i class="icon icon-edit"></i>
				<span class="closed"></span>
				<input type="text" name="fp" placeholder="订单备注：是否需要发票等"/>
			</div>
			<div class="lists order_lists">
				
			</div>
		</div>
		<div class="foot_con">
			<div class="foot_left od">
				<div class="cart_price od">
					<p class="new">￥<span class="total_price"></span></p>
					<p class="text">以到店实际价格为准</p>
				</div>
			</div>
			<div class="foot_btn">
				<input type="button" class="btn_confirm_order" value="确认订单"/>
			</div>
		</div>
	</div>
	<!--确认订单 end-->	

	<!-- step8  会员中心（订单列表） begin-->
	<div class="step step_order_list step_switch_1 hidden">
		<div class="reserve_header">
			<a href="{$_lang.host}company/?cid={$company_profile.c_id}">返回商家</a>
			预订
		</div>
		<div class="tab_nav">
			<ul>
				<li>消费</li>
				<li class="active">会员中心</li>
			</ul>
		</div>
		<div class="order_list">
			<ul>
			</ul>
			<div class="order_list_more">
			</div>
		</div>
	</div>
	<!--会员中心 end-->

	<!-- step5 订单详情页 begin-->
	<div class="step step_order_info hidden" id="details" >
		<div class="reserve_header">
			<a href="javascript:;"><i class="icon icon-angle-left icon-angle-left_details"></i></a>
			订单详情
		</div>
		<div class="ordering_details">
			<div class="success_tips">
				<span><i class="icon icon-check"></i></span>
				<p class="big">下单成功！</p>
				<p class="small">请呼唤店员确认订单</p>
			</div>
			<div class="order_state">
				<div>
					<p class="big">订单已提交成功</p>
					<p class="small">请等待商家确认</p>
				</div>
				<!-- <span class="more_status">更多状态></span> -->
			</div>
			<div class="lists">
				<p>订单明细(共1份)</p>
				<ul class="info_list">
					
				</ul>
			</div>
		   <!--  <div class="lists">
				<p>加菜明细(共1份)</p>
				<ul>
					<li>
						<span class="title">三鲜汤锅鸡一只</span>
						<span class="sum">x1</span>
						<span class="price">￥188/份</span>
					</li>
					<li> -->
						<!--在金额行占位用的span↓-->
					   <!--  <span class="title">&nbsp;</span>
						在金额行占位用的span↑
						<span class="xs">商品金额</span>
						<span class="price">￥188/份</span>
					</li>
				</ul>
			</div>
			<div class="total_prices"> -->
				<!--在金额行占位用的span↓-->
				<!-- <span class="place">&nbsp;</span> -->
				<!--在金额行占位用的span↑-->
			 <!--    <span class="xs">商品金额</span>
				<span class="price">￥188/份</span>
			</div> -->
			<div class="order_info">
				<p>订单信息</p>
				<ul>
				   
				</ul>
			</div>
		</div>
		<div class="foot_con">
			<div class="foot_left od">
				<div class="cart_price od">
					<p class="new">￥<span class="order_price">0</span></p>
					<p class="text">以到店实际价格为准</p>
				</div>
			</div>
			<div class="foot_btn_zhi">
				<input type="button" name="details_add" style="background-color:#2db2b0;display:none" value="加菜"/>
				<input type="button" name="details_py" style="background-color:#F3582F;width:100%" value="微信支付"/>
			</div>
		</div>
	</div>
	<!--订单详情页 end-->

	<!-- step6 弹出框选择桌号或保存订单 begin-->
	<div class="step step_table_num ngdialog hidden" >
		<div class="ngdialog_fg"></div>
		<div class="ngdialog_con">
			<div class="ngdialog_confirm">
				<p class="select">已到店，选桌下单</p>
				<p class="keep">未到店，保存订单</p>
				<p class="cancel">取消</p>
			</div>
			<div class="table_wrap">
				<p class="se">选择桌号</p>
				<p class="select">
					<select name="table_num">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
					</select>
				</p>
				<p class="sure">确定</p>
				<p class="cancel">取消</p>
			</div>
		</div>
	</div>
	<!--弹出框选择桌号或保存订单 end-->
	
</div>
<script type="text/javascript">
var host = '{$_lang.host}';
var cid = '{$company_profile.c_id}';	//商家id
</script>
<script src="{$_lang.company_path}/template/js/book.js"></script>
<script src="{$_lang.company_path}/template/js/book_function.js"></script>
<script type="text/javascript">
    //预订所需js
    $(function(){
        //确认订单发票输入框的清空事件
        $('.ordering_con>.fp>.closed').bind('click',function(){
            $('.ordering_con>.fp>input').val("").focus();
        });

        //弹出框方式1的高度定位
        var pmheight1=$('.prompt_mode1').height();
        $('.prompt_mode1').css('margin-top',-pmheight1/2+'px');
		
        //查看图片的弹出框图片的高度
        var pvwidth=$('.pic_view').width()+'px';
        $('.pic_view>img').css('width',pvwidth);
        $('.pic_view>img').css('height',pvwidth);
        //查看图片设置弹出框的高度定位
        var pvheight=$('.pic_view').height();
        $('.pic_view').css('margin-top',-pvheight/2+'px');
        //添加备注弹出框的高度定位
        var anheight=$('.add_note').height();
        $('.add_note').css('margin-top',-anheight/2+'px');

        //添加备注弹出框的出现事件
        $('.pic_view>.note li.updated,.pic_view>.note>span').bind('click',function(){
            $('.add_note,.note_fg').css('display','block');
            $('input[name="remark"]').val(remarks['remarks_'+pid]);
        });

        //添加备注弹出框的关闭事件
        $('.add_note>.note_nav>span,.note_fg').bind('click',function(){
            $('.add_note,.note_fg').css('display','none');
        });

        //添加备注弹出框的输入框清空事件
        $('.note_text_wrap>i').bind('click',function(){
            $('.note_text_wrap>input').val("").focus();
        });

        //查看图片弹出框的关闭按钮事件
        $('.pic_view>.closed,.pic_fg').bind('click',function(){
            $('.pic_view,.pic_fg').css('display','none');
            $('.pic_v .sum').removeClass(pid).removeClass('sum_'+pid);
            $('.cat_id_'+pid).addClass(pid);
            $('.con').text('这是备注内容');
        });

        //点击订单状态返回
        $('#state .reserve_header>a').bind('click',function(){
            $('#state').css('display','none');
            $('#details').css('display','block');
        });

    });

    //点餐左侧点击右侧滑动效果
    var aNav = $('.menu_left .left_con').find('li');//导航
    var aDiv = $('.menu_right .list_con ul');//楼层
    //鼠标滑动式改变
    $('.menu_right').scroll(function(){
        var winH = $(window).height();//可视窗口高度
        var iTop = $(window).scrollTop();//鼠标滚动的距离

        //鼠标滑动式改变
        aDiv.each(function(){
            if(winH+iTop - $(this).offset().top+112>winH){
                aNav.removeClass('active');
                console.log($(this).offset().top);
                aNav.eq($(this).index()).addClass('active');
                var s =aDiv.eq($(this).index()).children('p').text();
                $('.list_memu_title').text(s);
            }
        })

    })
    //点击回到当前楼层
    aNav.click(function(){
        var t = aDiv.eq($(this).index()).position().top;
        var s =aDiv.eq($(this).index()).children('p').text();
        var r=$('.menu_right').scrollTop();
        $('.list_memu_title').text(s);
        $('.menu_right').animate({
            scrollTop:t
        },500);
        $(this).addClass('active').siblings().removeClass('active');
    });
</script>
</body>
</html>